<template>
  <el-dialog
      top="10vh"
      width="600px"
      title="订单发货"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
  >
    <div class="order-info">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单号">{{ currentOrder.order_no }}</el-descriptions-item>
        <el-descriptions-item label="收货人">{{ currentOrder.address_nickname }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentOrder.address_phone }}</el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="2">{{ currentOrder.address_detail }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">¥{{ currentOrder.amount }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag v-if="currentOrder.status === 'paid'" type="primary">已支付</el-tag>
          <el-tag v-else type="warning">{{ currentOrder.status }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <SubmitForm
        :rule-form="ruleForm"
        :rules="rules"
        :form-list="formList"
        @change="handleFormChange"
        @save="onSave"
        @close="dialogValue = false"
    />

  </el-dialog>
</template>

<script>
import {http} from '@/api'

export default {
  name: 'OrderShip',
  data() {
    return {
      dialogValue: false,
      currentOrder: {},
      ruleForm: {},
      rules: {
        express_company: [{required: true, message: '快递公司不能为空'}],
        express_no: [{required: true, message: '快递单号不能为空'}],
      },
      formList: [
        {
          label: '快递公司',
          prop: 'express_company',
          name: 'input',
          colSpan: 24,
          placeholder: '请输入快递公司名称'
        },
        {
          label: '快递单号',
          prop: 'express_no',
          name: 'input',
          colSpan: 24,
          placeholder: '请输入快递单号'
        },
      ]
    }
  },
  methods: {
    handleFormChange({key, val}) {
      // 处理表单变化
    },
    open(row) {
      this.currentOrder = row;
      this.dialogValue = true;
      this.ruleForm = {
        express_company: row.express_company || '',
        express_no: row.express_no || ''
      };
    },
    onSave() {
      const updateData = {
        ...this.currentOrder,
        express_company: this.ruleForm.express_company,
        express_no: this.ruleForm.express_no,
        status: 'shipped' // 更新订单状态为已发货
      };
      
      http.order.update(this.currentOrder.id, updateData).then(res => {
        this.$message.success('发货成功');
        this.dialogValue = false;
        this.$emit('get-page');
      });
    }
  }
}
</script>

<style scoped lang="scss">
.order-info {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
</style> 